<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>按钮 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">按钮</div></header>
        <div class="card-body">
          
          <div class="table-responsive">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th class="w-25">按钮</th>
                  <th>class=""</th>
                  <th class="w-25">按钮</th>
                  <th>class=""</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><button class="btn btn-default btn-w-md" type="button">默认按钮</button></td>
                  <td><code>btn btn-default</code></td>
                  <td><button class="btn btn-primary btn-w-md" type="button">主要颜色按钮</button></td>
                  <td><code>btn btn-primary</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-success btn-w-md" type="button">绿色按钮</button></td>
                  <td><code>btn btn-success</code></td>
                  <td><button class="btn btn-info btn-w-md" type="button">蓝色按钮</button></td>
                  <td><code>btn btn-info</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-warning btn-w-md" type="button">橙色按钮</button></td>
                  <td><code>btn btn-warning</code></td>
                  <td><button class="btn btn-danger btn-w-md" type="button">红色按钮</button></td>
                  <td><code>btn btn-danger</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-secondary btn-w-md" type="button">灰色按钮</button></td>
                  <td><code>btn btn-secondary</code></td>
                  <td><button class="btn btn-dark btn-w-md" type="button">黑色按钮</button></td>
                  <td><code>btn btn-dark</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-purple btn-w-md" type="button">紫色按钮</button></td>
                  <td><code>btn btn-purple</code></td>
                  <td><button class="btn btn-pink btn-w-md" type="button">粉红色按钮</button></td>
                  <td><code>btn btn-pink</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-cyan btn-w-md" type="button">青色按钮</button></td>
                  <td><code>btn btn-cyan</code></td>
                  <td><button class="btn btn-yellow btn-w-md" type="button">黄色按钮</button></td>
                  <td><code>btn btn-yellow</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-brown btn-w-md" type="button">棕色按钮</button></td>
                  <td><code>btn btn-brown</code></td>
                  <td><button class="btn btn-link" type="button">链接形式</button></td>
                  <td><code>btn btn-link</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-light btn-w-md" type="button">浅灰色按钮</button></td>
                  <td><code>btn btn-light</code></td>
                  <td><button class="btn btn-indigo btn-w-md" type="button">靛蓝色按钮</button></td>
                  <td><code>btn btn-indigo</code></td>
                </tr>
                <tr>
                  <td><button class="btn btn-teal btn-w-md" type="button">蓝绿色按钮</button></td>
                  <td><code>btn btn-teal</code></td>
                  <td></td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p>如果你不希望按钮中的文字换行的话，可以为按钮添加 <code>.text-nowrap</code> 类。</p>
          
        </div>
      </div>
    </div>
    
    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">按钮的其他样式</div></header>
        <div class="card-body">
          
          <h6>可用作按钮的 <code>HTML</code> 标签</h6>
          <p><code>.btn</code> 系列类（class）被设计为用于 <code>&lt;button&gt;</code> 元素。不过，你也可以将这些类用于 <code>&lt;a&gt;</code> 或 <code>&lt;input&gt;</code> 元素（但是某些浏览器可能会使用略有不同的渲染方式）。</p>
            <p>当 <code>.btn</code> 系列类（class）用于 <code>&lt;a&gt;</code> 元素并触发页面上的功能（例如折叠内容），而不是链接到新页面或当前页面中的内容部分时，应当为这些链接设置 <code>role="button"</code> 属性，以便将链接的目的以适当的方式传递给类似屏幕阅读器的辅助工具。</p>
          <div class="border-example">
            <a class="btn btn-primary" href="#" role="button">Link</a>
            <button class="btn btn-primary" type="submit">Button</button>
            <input class="btn btn-primary" type="button" value="Input">
            <input class="btn btn-primary" type="submit" value="Submit">
            <input class="btn btn-primary" type="reset" value="Reset">
          </div>
          <pre>&lt;a class="btn btn-primary" href="#" role="button"&gt;Link&lt;/a&gt;
&lt;button class="btn btn-primary" type="submit"&gt;Button&lt;/button&gt;
&lt;input class="btn btn-primary" type="button" value="Input"&gt;
&lt;input class="btn btn-primary" type="submit" value="Submit"&gt;
&lt;input class="btn btn-primary" type="reset" value="Reset"&gt;</pre>
          
          <h6>边框按钮</h6>
          <p>当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 <code>.btn-outline-*</code> 系列类（class），已去除按钮上的所有背景图片和颜色。</p>
          <div class="example-box">
            <button type="button" class="btn btn-outline-primary">主色按钮</button>
            <button type="button" class="btn btn-outline-secondary">灰色按钮</button>
            <button type="button" class="btn btn-outline-success">绿色按钮</button>
            <button type="button" class="btn btn-outline-danger">红色按钮</button>
            <button type="button" class="btn btn-outline-warning">橙色按钮</button>
            <button type="button" class="btn btn-outline-info">蓝色按钮</button>
            <button type="button" class="btn btn-outline-light">浅灰色按钮</button>
            <button type="button" class="btn btn-outline-dark">黑色按钮</button>
            <button type="button" class="btn btn-outline-purple">紫色按钮</button>
            <button type="button" class="btn btn-outline-pink">粉红色按钮</button>
            <button type="button" class="btn btn-outline-cyan">青色按钮</button>
            <button type="button" class="btn btn-outline-yellow">黄色色按钮</button>
            <button type="button" class="btn btn-outline-indigo">靛蓝色按钮</button>
            <button type="button" class="btn btn-outline-brown">棕色按钮</button>
            <button type="button" class="btn btn-outline-teal">蓝绿色按钮</button>
          </div>
          
          <div class="row">
            <div class="col-lg-6">
              <div class="lyear-divider">圆角按钮</div>
              <p><code>class</code> 中增加 <code>.btn-round</code>。</p>
              <div class="example-box">
                <button class="btn btn-w-md btn-round btn-primary">主色按钮</button>
                <button class="btn btn-w-md btn-round btn-secondary">灰色按钮</button>
                <button class="btn btn-w-md btn-round btn-success">绿色按钮</button>
                <button class="btn btn-w-md btn-round btn-info">蓝色按钮</button>
                <button class="btn btn-w-md btn-round btn-warning">橙色按钮</button>
                <button class="btn btn-w-md btn-round btn-danger">红色按钮</button>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="lyear-divider">带图标的按钮</div>
              <p>这里放弃跟v4版本那样使用 <code>label</code> 的情况，直接在按钮中放图标按钮元素即可。</p>
              <div class="example-box">
                <button class="btn btn-primary"><i class="mdi mdi-checkbox-marked-circle-outline"></i> 确认提交</button>
                <button class="btn btn-info"><i class="mdi mdi-play-circle-outline"></i> 播放</button>
                <button class="btn btn-warning"><i class="mdi mdi-delete-empty"></i> 清空数据</button>
                <button class="btn btn-danger"><i class="mdi mdi-close"></i> 删除</button>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    
    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">按钮的其他属性</div></header>
        <div class="card-body">
          
          <h6>指定按钮宽度</h6>
          <p>可使用 <code>.btn-w-xs</code>, <code>.btn-w-sm</code>, <code>.btn-w-md</code>, <code>.btn-w-lg</code> 和 <code>.btn-w-xl</code> 类指定按钮宽度。</p>
          <div class="example-box">
            <button class="btn btn-w-xs btn-primary">极小宽</button>
            <button class="btn btn-w-sm btn-primary">小的</button>
            <button class="btn btn-w-md btn-primary">中等宽度</button>
            <button class="btn btn-w-lg btn-primary">宽按钮</button>
            <button class="btn btn-w-xl btn-primary">超宽</button>
          </div>
          <div class="row">
            <div class="col-lg-6">
              <div class="lyear-divider">按钮大小</div>
              <p>需要更大或更小的按钮吗？使用 <code>.btn-lg</code> 或 <code>.btn-sm</code> 类可以设置按钮的不同尺寸</p>
              <div class="example-box">
                <button type="button" class="btn btn-primary btn-lg">大的按钮</button>
                <button type="button" class="btn btn-primary btn-sm">小的按钮</button>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="lyear-divider">禁用状态</div>
              <p>通过为 <code>&lt;button&gt;</code> 元素设置 <code>disabled</code> 属性（此属性是布尔类型的）可以使按钮看起来处于禁用状态。处于禁用状态的按钮被设置了 <code>pointer-events: none</code> 属性，以防止触发鼠标悬停（hover）和活动（active）状态。</p>
              <div class="example-box">
                <button type="button" class="btn btn-primary" disabled>主色按钮</button>
                <button type="button" class="btn btn-secondary" disabled>灰色按钮</button>
                <a href="#!" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">主色链接</a>
                <a class="btn btn-secondary disabled" role="button" aria-disabled="true">灰色链接</a>
              </div>
            </div>
            <div class="col-lg-12">
              <div class="lyear-divider">块级元素按钮</div>
              <p>创建块级元素按钮，不再像 Bootstrap 4 一样给按钮指定相关的类，这里是在父元素上指定 <code>display</code> 和 <code>gap</code> 相关。</p>
              <div class="border-example">
                <div class="d-grid gap-2">
                  <button class="btn btn-primary" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2"&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
              <p>在这里，我们创建了一个响应式变化，从垂直堆叠的按钮开始，直到 <code>md</code> 断点，其中 <code>.d-md-block</code> 取代了 <code>.d-grid</code> 类，从而使 <code>gap-2</code> 类无效。调整浏览器大小以查看它们的变化。</p>
              <div class="border-example">
                <div class="d-grid gap-2 d-md-block">
                  <button class="btn btn-primary" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2 d-md-block"&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
              <p>可以使用网格列宽类调整块按钮的宽度。例如，对于半宽“块级元素按钮”，使用 <code>.col-6</code> 和 <code>.mx-auto</code> 将其水平居中放置。</p>
              <div class="border-example">
                <div class="d-grid gap-2 col-6 mx-auto">
                  <button class="btn btn-primary" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2 col-6 mx-auto"&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
              <p>当按钮水平时，可使用其他类调整按钮的对齐方式。这里我们以前面的响应示例为例，在按钮上添加了一些 <code>flex</code> 类和 <code>margin</code>相关类，以便在按钮不再堆叠时右对齐按钮。</p>
              <div class="border-example">
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                  <button class="btn btn-primary me-md-2" type="button">按钮</button>
                  <button class="btn btn-primary" type="button">按钮</button>
                </div>
              </div>
              <pre>&lt;div class="d-grid gap-2 d-md-flex justify-content-md-end"&gt;
  &lt;button class="btn btn-primary me-md-2" type="button"&gt;按钮&lt;/button&gt;
  &lt;button class="btn btn-primary" type="button"&gt;按钮&lt;/button&gt;
&lt;/div&gt;</pre>
            </div>
          </div>
          
          <div class="callout callout-warning">Bootstrap 5的文档中有关于按钮插件的说明，对于这个按钮插件目前我也不太明白具体在实际开发中有什么用处，这里就不再说明，有兴趣的小伙伴自行查看官方的文档。</div>
          
        </div>
      </div>
    </div>
        
  </div>
  
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>